<template>
  <!-- 滑动手势组件 -->
  <!-- 1 slot插槽 -->
  <!-- 2 向父组件传递滑动方向 -->
  <view @touchstart="handleTouchStart" @touchend="handleTouchEnd">
    <slot></slot>
  </view>
</template>

<script>
/**
 * 1 给容器绑定两个触屏事件 touchstart 和touchend
 * 2 用户按下屏幕事件
 *  1 记录用户按下屏幕事件 Date.now() 时间戳 返回1970-1-1到现在的毫秒数
 *  2 记录用户按下屏幕的坐标 event.changedTouches[0].clientX 和 clientY
 * 3 用户手指离开屏幕事件
 *  1 记录用户手指离开屏幕的时间 Date.now()
 *  2 记录用户手指离开屏幕的坐标
 *  3 根据按下和离开的时间 运算 判断 用户按下屏幕时长是否合法
 *  4 根据按下和离开的坐标 判断距离是否合法 判断滑动方向
 */
export default {
  data() {
    return {
      // 按下时间
      starTime: 0,
      // 按下坐标
      startX: 0,
      startY: 0
    }
  },
  methods: {
    //  手指按下屏幕
    handleTouchStart(event) {
      this.startTime = Date.now()
      this.startX = event.changedTouches[0].clientX
      this.startY = event.changedTouches[0].clientY
    },
    // 手指离开屏幕
    handleTouchEnd(event) {
      const endTime = Date.now()
      const endX = event.changedTouches[0].clientX
      const endY = event.changedTouches[0].clientY

      // 判断时长
      if (endTime - this.startTime > 2000) {
        return
      }
      let direction = ''
      // 判断用户滑动距离绝对值是否合法，合法：判断滑动方向
      if (
        Math.abs(endX - this.startX) > 10 &&
        Math.abs(endY - this.startY) < 10
      ) {
        direction = endX - this.startX > 0 ? 'right' : 'left'
      } else {
        return
      }

      this.$emit('swiperaction', { direction })
    }
  }
}
</script>

<style>
</style>